import React from "react";
import Trial from "../trial";
import frame from "../../../style/frame.less";
import grid from "../../../style/grid.less";
import finance from "../../../images/product/finance.png"

import Table from "../../components/table/table";
import DialogLayout from "../../components/dialog/DialogLayout";
import Dialog from "../../components/dialog/Dialog";

class Finance extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            data: [],
            operation: [],
        };
    }

    componentDidMount() {
        let title = [
            {
                field: 'product_id', width: '2%',
                render: (text, record) => (//TODO 动态插入 render 函数
                    <span>
                        <input type="radio" name={'product'} />
                    </span>
                )
            },
            {field: 'group', width: '9%'},
            {field: 'specifications', width: '10%'},
            {field: 'vCPU', width: '5%'},
            {field: 'memory', width: '5%'},
            {field: 'cpu_model', width: '20%'},
            {field: 'cpu_frequency', width: '20%'},
            {field: 'intranet_bandwidth', width: '7%'},
            {field: 'intranet_transceiver', width: '7%'},
            {field: 'IPv6', width: '8%'},
            {field: 'price', width: '8%'},
        ];
        this.setState({'title': title});
        let data = [
            {
                'group': '通用型 g5',
                'specifications': 'ecs.g5.large',
                'vCPU': '2 vCPU',
                'memory': '8 GiB',
                'cpu_model': 'Intel Xeon(Skylake) Platium 8163',
                'cpu_frequency': '2.5 GHz',
                'intranet_bandwidth': '1 Gbps',
                'intranet_transceiver': '30 万 PPS',
                'IPv6': '是',
                'price': '222.25 元/月',
            },
            {
                'group': '通用型 g5',
                'specifications': 'ecs.g5.large',
                'vCPU': '2 vCPU',
                'memory': '8 GiB',
                'cpu_model': 'Intel Xeon(Skylake) Platium 8163',
                'cpu_frequency': '2.5 GHz',
                'intranet_bandwidth': '1 Gbps',
                'intranet_transceiver': '30 万 PPS',
                'IPv6': '是',
                'price': '222.25 元/月',
            },
        ];
        this.setState({'data': data});
    }

    render() {
        const {operation = [], title = [], data = []} = this.state;
        return (
            <div>
                <div className={`${frame.component} ${frame.solutionContent}`}>
                    <div className={frame.solutionContentTitle}>
                        在线报价系统
                    </div>
                    <div className={frame.solutionContentSubTitle}>
                        <p>为您提供财税 方案在线报价服务。</p>
                    </div>
                </div>

                <div className={frame.product_template}>
                    {/*<div>
						<img src={finance} alt="" style={{height: '45vh'}}/>
					</div>*/}
                    <div className={grid.container} style={{padding: '8vh 1vw 0'}}>

                        <div className={`${grid.row} ${grid.multi} ${grid.left} ${grid.top}`}>
                            <div className={`${frame.priceDesc } ${grid.item}`}>
                                <div style={{fontSize: '0.12rem', fontWeight: 'bold'}}>
                                    实例
                                </div>
                                <ul>
                                    <li style={{margin: '0.5vh'}}>
                                        ·&nbsp;&nbsp;实例规格族
                                    </li>
                                    <li style={{margin: '0.5vh'}}>
                                        ·&nbsp;&nbsp;场景配置选型
                                    </li>
                                    <li style={{margin: '0.5vh'}}>
                                        ·&nbsp;&nbsp;实例规格可购买的地域
                                    </li>
                                </ul>
                            </div>

                            <div className={`${grid.item} ${grid.grow}`}>
                                <div className={`${grid.row} ${grid.multi} ${grid.left} ${grid.middle}`}>
                                    <div className={`${grid.item}`}>
                                        I/O 优化实例
                                    </div>
                                    <div className={`${grid.item} ${grid.row} ${grid.left} ${grid.middle}`} style={{width: '14vw'}}>
                                        <div className={`${grid.item}`}>
                                            vCPU
                                        </div>
                                        <div className={`${grid.item}`}>
                                            <select name="" id="">
                                                <option value="" selected={'selected'}>请选择vCPU</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div className={`${grid.item} ${grid.row} ${grid.left} ${grid.middle}`} style={{width: '14vw'}}>
                                        <div className={`${grid.item}`}>
                                            内存
                                        </div>
                                        <div className={`${grid.item}`}>
                                            <select name="" id="">
                                                <option value="" selected={'selected'}>2G</option>
                                                <option value="">4G</option>
                                                <option value="">6G</option>
                                                <option value="">8G</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div className={`${grid.item} ${grid.row} ${grid.left} ${grid.middle}`} style={{width: '14vw'}}>
                                        <div className={`${grid.item}`}>
                                            实例规格
                                        </div>
                                        <div className={`${grid.item}`}>
                                            <input type="text" placeholder={'如：ecs.sn1ne.large'} style={{width: '120px'}} />
                                        </div>
                                    </div>
                                    <div className={`${grid.item} ${grid.row} ${grid.left} ${grid.middle}`} style={{width: '14vw'}}>
                                        <div className={`${grid.item}`}>
                                            IPv6
                                        </div>
                                        <div className={`${grid.item}`}>
                                            <select name="" id="">
                                                <option value="">IPv4</option>
                                                <option value="" selected={'selected'}>IPv6</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>

                                <div className={`${grid.row} ${grid.multi} ${grid.left} ${grid.bottom}`}
                                     style={{borderBottom: '1px solid #b3b3b3'}}>
                                    <div className={`${grid.item}`}
                                         style={{borderBottom: '2px solid #00c1de', marginBottom: 0, color: '#00c1de'}}>
                                        仅显示最新一代
                                    </div>
                                    <div className={`${grid.item}`} style={{borderBottom: '2px solid white', marginBottom: 0}}>
                                        所有代
                                    </div>
                                </div>

                                <div className={`${grid.row} ${grid.multi} ${grid.left} ${grid.bottom}`} style={{margin: '2vh 0 1vh'}}>
                                    <div className={`${grid.item}`}>
                                        架构：
                                    </div>
                                    <div className={`${grid.item}`} style={{background: '#00c1de', color: 'white'}}>
                                        x86计算
                                    </div>
                                    <div className={`${grid.item}`}>
                                        异构计算 GPU / FPGA
                                    </div>
                                    <div className={`${grid.item}`}>
                                        弹性裸金属服务器（神龙）
                                    </div>
                                    <div className={`${grid.item}`}>
                                        超级计算集群
                                    </div>
                                </div>
                                <div className={`${grid.row} ${grid.multi} ${grid.left} ${grid.bottom}`} style={{margin: '1vh 0 2vh'}}>
                                    <div className={`${grid.item}`}>
                                        分类：
                                    </div>
                                    <div className={`${grid.item}`} style={{background: '#00c1de', color: 'white'}}>
                                        通用型
                                    </div>
                                    <div className={`${grid.item}`}>
                                        计算型
                                    </div>
                                    <div className={`${grid.item}`}>
                                        内存型
                                    </div>
                                    <div className={`${grid.item}`}>
                                        大数据型
                                    </div>
                                    <div className={`${grid.item}`}>
                                        本地SSD
                                    </div>
                                    <div className={`${grid.item}`}>
                                        高主频型
                                    </div>
                                    <div className={`${grid.item}`}>
                                        入门级（共享）
                                    </div>
                                </div>

                                <div className={`${frame.priceTable } ${grid.row} ${grid.multi} ${grid.left} ${grid.bottom}`}>
                                    <div className={`${grid.item} ${grid.grow}`} style={{padding: 0}}>
                                        <Table header={false} operation={operation} title={title} data={data} />
                                    </div>
                                </div>

                                <div className={`${grid.row} ${grid.multi} ${grid.left} ${grid.bottom}`} style={{margin: '2vh 0 0'}}>
                                    <div className={`${grid.item}`} style={{width: '12vw', background: '#f0f0f0', textAlign: 'right'}}>
                                        当前选择实例：
                                    </div>
                                    <div className={`${grid.item}`}>
                                        ecs.g5.large
                                    </div>
                                    <div className={`${grid.item}`}>
                                        <span style={{fontWeight: 'bold'}}>(2 vCPU 8 GiB, 通用型 g5)</span>
                                    </div>
                                </div>
                                <div className={`${grid.row} ${grid.multi} ${grid.left} ${grid.middle}`} style={{margin: '-2vh 0 0'}}>
                                    <div className={`${grid.item}`} style={{width: '12vw', background: '#f0f0f0', textAlign: 'right'}}>
                                        购买实例数量：
                                    </div>
                                    <div className={`${grid.item}  ${grid.row} ${grid.left} ${grid.middle}`}>
                                        <div className={`${grid.item}`}>
                                            <input type="number" value={1} />
                                        </div>
                                        <div className={`${grid.item}`}>
                                            台
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>

                <Trial />
            </div>
        )
    }
}

export default Finance
